<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script>
			// this的指向 在定义的时候不能确定, 只有执行调用的时候才能确定!

			// this指向, 面试题 60-80%几率考.
			// 1. 全局作用域中/ 或者普通函数调用/ 或者定时器里面 this 指向 window
			// 1.1 全局作用域
			console.log(this)

			// 1.2 普通函数调用
			function fn() {
				console.log(this)
			}
			fn()
			// window.fn()
			// 1.3 定时器中
			setTimeout(function () {
				// console.log(this)
			}, 1000)
			// window.setTimeout()  ,  setInterval() 也是 指向window

			// 2.1 方法调用中, 谁调用这个方法, this指向谁
			var obj = {
				name: '小亮',
				age: 18,
				sayHi: function () {
					console.log(this) // this指向的是调用这个方法的对象
				},
			}
			obj.sayHi() // 谁调用,指向谁

			// 2.2 事件注册的时候, this指向被绑定的元素
			// var btn = document.querySelector('button')
			// btn.addEventListener('click', function (e) {
			// 	// 指向绑定的这个事件源
			// 	// this 指向 btn
			// 	console.log(this)
			// 	// 指向事件绑定的元素
			// 	console.log(e.currentTarget)
			// })

			// 3. 构造函数中, this 指向的是构造函数的实例
			function Foo(name, age) {
				this.name = name
				this.age = age
				console.log(this) // 这个this不一定
			}

			// !! this在定义的时候,并不能确定指向,只有执行的时候才能确定

			var person1 = new Foo('小王', 18)
			console.log(person1)

			var person2 = new Foo('小红', 19)
			console.log(person2)

			// 对象的方法
			console.log('------------------------------')
			const obj1 = {
				name: '小梁',
				age: '18',
				sayHi: function () {
					console.log(this)
				},
			}
			let foo1 = obj1.sayHi
			// let foo1=function(){
			//   console.log(this)
			// }
			foo1()
			// window.foo1()  ===>这时候，foo1里this指向window
		</script>
	</body>
</html>
